<!--
njt通用分页条

参数：
loadingState
pageNo
pageSize
totalAmount

事件：
// pagesize-changed: 每页条数改变
// go-to-page: 跳到第几页,带上pageSize
-->
<template>
  <div class="full-width">
    <div class="row justify-end q-gutter-xs items-center">
      <div v-if="showPageSizeSelector">{{$t('每页条数')}}</div>
      <select v-model="pageSizeChosen" style="height:24px" class="q-mx-xs" @change="onPageSizeChange"
        v-if="showPageSizeSelector">
        <option v-for="i in pageSizeList" :key="i" :value="i">{{i}}</option>
      </select>
      <q-btn unelevated dense color="primary" icon="first_page" @click="gotoPage(1)"
        :disable="pageNo <= 1||loadingState" :title="$t('第一页')" />
      <q-btn unelevated dense color="primary" icon="chevron_left" @click="gotoPage(pageNo - 1)"
        :disable="pageNo <= 1||loadingState" :title="$t('上一页')" />
      <input type="text" :maxlength="10" class="text-center" style="width:60px;height:24px" v-model="inputPageNo"
        @keyup.enter="inputEnter" @blur="inputPageNo=pageNo" @focus="$event.target.select()" :disabled="loadingState" />
      <div>{{$t('共{totalPageNum}页 ({totalAmount}条)',{totalPageNum: totalPageNum, totalAmount: totalAmount})}}</div>
      <q-btn unelevated dense color="primary" icon="chevron_right" @click="gotoPage(pageNo + 1)"
        :disable="pageNo>=totalPageNum || loadingState" :title="$t('下一页')" />
      <q-btn unelevated dense color="primary" icon="last_page" @click="gotoPage(totalPageNum)"
        :disable="pageNo>=totalPageNum || loadingState" :title="$t('最后一页')" />
      <q-btn unelevated dense color="primary" icon="refresh" @click="gotoPage(pageNo)" :disable="loadingState"
        :loading="loadingState" :title="$t('刷新')" v-if="showRefreshButton" />
    </div>
  </div>
</template>


<script lang="ts">
export default {
  name: 'pagingBar'
}
</script>

<script lang="ts" setup>
import _ from 'lodash'
import {computed, watch, ref} from 'vue';

const props = defineProps({
  loadingState: {
    type: Boolean,
    default: false
  }, // 是否处于加载状态
  pageNo: {
    type: Number, // 当前页码
    default: 1
  },
  pageSize: {
    type: Number,
    default: 40
  }, // 每页条数(可考虑保存在localStorage中)
  totalAmount: {
    type: Number,
    default: 0
  },
  // 显示刷新按钮(本地分页建议设置为false)
  showRefreshButton: {
    type: Boolean,
    default: true
  },
  // 显示每页条数下拉选择框
  showPageSizeSelector: {
    type: Boolean,
    default: true
  },
  // 是否限制输入的页码(本地分页建议设置为true)
  restrictInputPageNo: {
    type: Boolean,
    default: false
  }
})

// pageSize列表
const pageSizeList = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 500]

// 输入框内容，初始为pageNo
const inputPageNo = ref('')
inputPageNo.value = props.pageNo.toString()

// 当前选择的pageSize
const pageSizeChosen = ref(props.pageSize)

// 总页数，根据pageSize及totalAmount算出来，最少一页(即便没有数据)
const totalPageNum = computed(() => {
  let pageNum = Math.floor(props.totalAmount / props.pageSize)
  if (props.totalAmount % props.pageSize > 0) {
    pageNum += 1
  }
  return pageNum < 1 ? 1 : pageNum
})

//emit定义
const emit = defineEmits<{
  (e: 'pagesize-changed', data: number): void
  (e: 'go-to-page', pageNo: number, pageSize: number): void
}>()

// 每页条数改变
const onPageSizeChange = function () {
  emit('pagesize-changed', pageSizeChosen.value)
}

// 手动输入页码回车
const inputEnter = function () {
  let pageNo = parseInt(inputPageNo.value)
  if (!Number.isInteger(pageNo)) {
    inputPageNo.value = props.pageNo.toString()
    return
  }
  if (props.restrictInputPageNo) {
    if (pageNo < 1) {
      pageNo = 1
      inputPageNo.value = pageNo.toString()
    } else if (pageNo > totalPageNum.value) {
      pageNo = totalPageNum.value
      inputPageNo.value = pageNo.toString()
    }
  }
  gotoPage(pageNo)
}

// 翻页
const gotoPage = function (pageNo: number) {
  emit('go-to-page', pageNo, props.pageSize)
}

// 响应pageNo的变化
watch(() => props.pageNo,
  (currVal) => {
    inputPageNo.value = currVal.toString()
  })

pageSizeChosen.value = _.indexOf(pageSizeList, props.pageSize) === -1 ? 40 : props.pageSize
inputPageNo.value = props.pageNo.toString()

</script>
